<template>
	<public-view  navType="other" navTitle="礼品专区">
		<view class="content">
			<view class="log-box flex a-i-c j-c-b" @click="goTo({url:'/pages/my/giftGetLog'})">
				<view class="left flex a-i-c">
					<image class="log-image" src="@/static/images/my/giftLog/gift-log.svg" mode=""></image>
					<view class="f-s-28 color-333 f-w-b">
						领取记录
					</view>
				</view>
				<image class="next-page-icon" src="@/static/images/my/next-page.svg" mode=""></image>
			</view>
			<view class="gift-list-box flex f-w-w j-c-b">
				<block v-for="(item, index) in gift_list" :key="index">
					<gift-box :data="item"></gift-box>
				</block>
			</view>
		</view>
	</public-view>
	
</template>

<script>
	import giftBox from "@/components/myComponents/giftBox.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"gift-box":giftBox
		},
		data() {
			return {
				page:1,
				gift_list:[]
			};
		},
		onReachBottom() {
			this.page++
			this.getGiftList()
		},
		onLoad() {
			this.getGiftList()
		},
		methods:{
			goTo,
			getGiftList(){
				let that = this
				that.util.postRequest({
					url:"v1/goods_gift/index",
					data:{
						page:that.page,
						rows:10
					}
				}).then(res=>{
					console.log(res)
					if(that.page === 1){
						that.gift_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.gift_list = that.gift_list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gift-list-box{
		width: 100%;
	}
	.log-box{
		width: 100%;
		padding: 30upx 44upx;
		background: #FFFFFF;
		border-radius: 22upx;
		margin-bottom: 22upx;
		.left{
			.log-image{
				width: 44upx;
				height: 52upx;
				margin-right: 26upx;
			}
		}
	}
	.next-page-icon{
		width: 32upx;
		height: 32upx;
	}
	.content{
		padding: 20upx 26upx;
		width: 750upx;
	}
</style>
